<template>
  <el-card>
    <div class="stat-card">
      <el-row type="flex" justify="space-between">
        <div class="card-header">
          <span class="title-line" />
          <span class="title">趋势图</span>
        </div>
        <div class="timespan">
          <!--<el-button :type="time === 'today' ? 'primary' : ''" @click="handlerChangeTime('today')">今日</el-button>-->
          <!--<el-button :type="time === 'week' ? 'primary' : ''" @click="handlerChangeTime('week')">本周</el-button>-->
          <!--<el-button :type="time === 'month' ? 'primary' : ''" @click="handlerChangeTime('month')">本月</el-button>-->
          <!--<el-button :type="time === 'quarter' ? 'primary' : ''" @click="handlerChangeTime('quarter')">本季度</el-button>-->
          <!--<date-time-range :value="timespan" class="timespan-input" />-->
          <edu-date :value.sync="daterange" :options="dateOptions" :args="dateArgs" />
        </div>
      </el-row>
      <div class="data-type">
        <el-radio-group v-model="dataType" size="small">
          <el-radio-button :label="1">领取次数</el-radio-button>
          <el-radio-button :label="2">使用次数</el-radio-button>
          <el-radio-button :label="3">领取并使用次数</el-radio-button>
          <el-radio-button :label="4">过期数量</el-radio-button>
        </el-radio-group>
      </div>
      <div
        v-loading="loading"
        :element-loading-text="loadingText"
        :element-loading-spinner="loadingSpinner"
        class="card-body"
      >
        <ve-line
          ref="echarts"
          height="362px"
          :data="chartData"
          :settings="settings"
          :colors="colors"
          :extend="extendsConfig"
        />
      </div>
    </div>
  </el-card>
</template>

<script>
import VeLine from 'v-charts/lib/line.common'
import EduDate from '@public/form/date.vue';
import { shortcutsLayterThreeMonth } from '@/common/js/const.js';

export default {
  name: 'ContrastTicketTrend',
  components: {
    VeLine,
    EduDate
  },
  props: {
    ticketId: {
      type: [String, Number],
      require: true,
      default: 0
    },
    couponIds: {
      type: Array,
      default: _ => []
    }
  },
  data() {
    return {
      loading: true,
      loadingText: '',
      loadingSpinner: '-',
      dataType: 1,
      dateArgs: {
        date_type: 'daterange',
        format: 'yyyy-MM-dd'
      },
      daterange: null,
      settings: {
        labelMap: {
          datetime: '日期'
        },
        yAxisType: ['normal'],
        yAxisName: ['数量']
      },
      chartData: {
        columns: ['datetime'],
        rows: []
      },
      colors: ['#3D59FD', '#6AACF7', '#47D59B', '#FAB129', '#B168FD', '#F873C3'],
      extendsConfig: {
        grid: {
          right: 20,
          left: 20
        },
        xAxis(v) {
          v.forEach(i => {
            i.boundaryGap = false;
            i.axisLabel = {
              showMaxLabel: true,
              rotate: 65
            };
          });

          return v;
        },
        yAxis(v) {
          v.forEach(i => {
            i.minInterval = 1;
          });

          return v;
        }
      },
      dateOptions: {
        disabledDate: function (time) {
          // 计算两年前的今天时间
          const date = new Date();
          date.setFullYear(date.getFullYear() - 2);
          date.setDate(date.getDate() - 1);

          return time.getTime() > Date.now() || time.getTime() < date.getTime();
        },
        shortcuts: shortcutsLayterThreeMonth
      }
    }
  },
  watch: {
    daterange() {
      this.loadStatData()
    },
    dataType() {
      this.loadStatData()
    },
    couponIds: {
      handler() {
        this.loadStatData()
      },
      deep: true
    }
  },
  created() {
    this.loadStatData()
  },
  methods: {
    loadStatData() {
      this.loading = true
      if (this.couponIds.length === 0) {
        this.loadingText = '选择活动券后查看'
        return;
      }

      this.loadingSpinner = 'el-icon-loading'
      this.loadingText = '数据加载中'

      this.$http.get(
          '/admin/data/ticket/contrast/trend',
          {
            data_type: this.dataType,
            ticket_id: this.ticketId,
            coupon_ids: this.couponIds,
            daterange: this.daterange
          },
          ({ data }) => {
            const {
              rows,
              columns
            } = data
            this.chartData.rows = rows
            this.chartData.columns = [].concat(['date']).concat(Object.keys(columns));
            this.settings.labelMap = {
              date: '日期',
              ...columns
            }
            this.loading = false
          },
          ({ msg }) => {
            this.loadingText = msg
          },
          false
      )
    },
    handlerChangeTime(time) {
      this.time = time
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/styles/mixin.scss';

.stat-card {
  @include card-header;

  .data-type {
    margin-top: 10px;
  }

  .card-body {
    margin-top: 26px;
  }
}
</style>
